
<template>
	<div class="gongyingshangshangpin">
    <!-- 手机版 -->
    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; padding-bottom: 1rem; background: #f6f8fb;">
      <mtop></mtop>
      <!-- <div style="margin: 0.3rem; " @click="$router.back(-1)">
        返回
      </div> -->
        <div style="padding: 0.3rem;">
          <div>
            <div class="flex" v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div style="width: 6.9rem; padding: 0.2rem; margin-bottom: 0.2rem; background: rgb(255, 255, 255); border-radius: 0.2rem">
                  <div class="flex" style="justify-content : space-between;">
                    <div class="flex">
                    
                      <div>
                            <div style="font-size: 20px;color: rgb(2, 12, 29);font-weight: 400;font-family:'HarmonyOS_Sans_SC_'">{{ title }}</div> 
                            <div style="font-size: 10px;font-weight: 400;color: rgb(106, 106, 106);margin-top: 0.3rem;">商品编码: {{ code }}</div>
                            <div class="t_item_info">
                                <span class="t_table_list_con_title" style="font-size: 10px;font-weight: 400;color: rgb(106, 106, 106);font-family:'HarmonyOS_Sans_SC_'">更新时间: </span>
                                <span style="font-size: 10px;font-weight: 400;color: rgb(106, 106, 106);margin-left: 7px;font-family:'HarmonyOS_Sans_SC_'"> {{ time}}</span>
                            </div>
                            <div style="margin-top: 15px;">
                                <!-- <span class="t_table_list_con_title" style="font-size: 14px;font-weight: 400;font-family:'HarmonyOS_Sans_SC_';color: rgb(2, 12, 29)">详情: </span> -->
                                <div v-html="this.package_text">
                                </div>
                            </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <div>
            <div class="flex" v-loading="loading"  element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
              <div style="width: 6.9rem; padding: 0.2rem; margin-bottom: 0.2rem; background: rgb(255, 255, 255); border-radius: 0.2rem">
                  <div class="flex" style="justify-content : space-between;">
                    <div class="flex">
                      <div>  
                            <div>
                              <img src="../../../static/img/shangjia-2.png" style="width: 14px;margin-right:0.1rem;display: inline-block;vertical-align: middle">
                              <div style="display: inline-block;vertical-align: middle;">上下架状态 : 
                                <div v-if="shangxiajiastatus==100" style="display: inline-block;color: #6A6A6A;">上架</div>
                                <div v-if="shangxiajiastatus==0" style="display: inline-block;color: #6A6A6A;">下架</div>
                              </div>
                            </div>
                            <div style="margin-top: 0.2rem">
                              <img src="../../../static/img/shangxianshijian.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                <div style="display: inline-block;vertical-align: middle;">上线时间 : 
                                  <div style="display: inline-block;color: #6A6A6A;">{{ created_at }}</div>
                                </div>
                            </div>
                            <div style="margin-top: 0.2rem">
                              <img src="../../../static/img/rili.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                              <div style="display: inline-block;vertical-align: middle;">开卡年龄 : 
                                <div style="display: inline-block;color: #6A6A6A;">{{ min_age }}-{{ max_age }}</div>
                              </div>
                            </div>
                            <div style="margin-top: 0.2rem">
                              <img src="../../../static/img/heyue.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                              <div style="display: inline-block;vertical-align: middle;">合约期 : 
                                <div style="display: inline-block;color: #6A6A6A;">
                                  <div v-if="contract==0" style="display: inline-block;color: #6A6A6A">无</div>
                                  <div v-if="contract==1" style="display: inline-block;color: #6A6A6A">1个月</div>
                                  <div v-if="contract==2" style="display: inline-block;color: #6A6A6A">2个月</div>
                                  <div v-if="contract==3" style="display: inline-block;color: #6A6A6A">3个月</div>
                                  <div v-if="contract==4" style="display: inline-block;color: #6A6A6A">4个月</div>
                                  <div v-if="contract==5" style="display: inline-block;color: #6A6A6A">5个月</div>
                                  <div v-if="contract==6" style="display: inline-block;color: #6A6A6A">6个月</div>
                                  <div v-if="contract==7" style="display: inline-block;color: #6A6A6A">7个月</div>
                                  <div v-if="contract==8" style="display: inline-block;color: #6A6A6A">8个月</div>
                                  <div v-if="contract==9" style="display: inline-block;color: #6A6A6A">9个月</div>
                                  <div v-if="contract==10" style="display: inline-block;color: #6A6A6A">10个月</div>
                                  <div v-if="contract==11" style="display: inline-block;color: #6A6A6A">11个月</div>
                                  <div v-if="contract==12" style="display: inline-block;color: #6A6A6A">12个月</div>
                                  <div v-if="contract==24" style="display: inline-block;color: #6A6A6A">24个月</div>
                                  <div v-if="contract==36" style="display: inline-block;color: #6A6A6A">36个月</div>
                                </div>
                              </div>
                            </div>
                            <div style="margin-top: 0.2rem">
                                  <div style="display: inline-block;">
                                    <img src="../../../static/img/express-package-full.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                    快递方式 : 
                                    <span style="color: #6A6A6A;">{{ express }}</span>
                                  </div>
                            </div>
                            <!-- <div style="margin-top: 0.2rem">
                              <img src="../../../static/img/xuanzejihuob.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                              <div style="display: inline-block;vertical-align: middle;">激活方式 : 
                                <div style="display: inline-block;color: #6A6A6A;">{{ activation_method }}</div>
                              </div>
                            </div> -->
                            <div style="margin-top: 0.2rem">
                                  <div style="display: inline-block;">
                                    <img src="../../../static/img/express-package-full.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                                    激活方式 : 
                                    <span style="color: #6A6A6A;">{{ activation_method }}</span>
                                  </div>
                            </div>
                            <div style="margin-top: 0.2rem">
                              <img src="../../../static/img/24gf-thumbsUp2.png" style="width: 14px; margin-right:0.1rem;display: inline-block;vertical-align: middle;">
                              <div style="display: inline-block;vertical-align: middle;">支持选号 : 
                                <div v-if="take_number==1||take_number==2" style="display: inline-block;color: #6A6A6A;">支持</div>
                                <div v-if="take_number==0" style="display: inline-block;color: #6A6A6A;">不支持</div>
                              </div>
                            </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
        <div style="position: fixed; left: 0; bottom: 0; width: 100%; box-shadow: 0px -10px 20px 0px rgba(0, 0, 0, 0.05); background: rgb(255, 255, 255);">
          <mfooter></mfooter>
        </div>
    </div>
      
	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
  import mtop from '../mtop.vue'
  import mfooter from '../mfooter.vue'
	export default {
		name: 'gongyingshangshangpin',
    components:{
      left,top,topandleft,footers,mtop,mfooter
    },
		data() {
			return {
        list:[],
        shoujiban:false,
        relo:true,
        title:'',
        package_text:'',
        code:'',
        time:'',
        shangxiajiastatus:'',//上下架状态
        created_at:'',//上线时间
        min_age:'',//开卡最小年龄
        max_age:'',//开卡最大年龄
        contract:'',//合约期
        express:'',//快递方式
        activation_method:'',//激活方式
        take_number:'', //支持选号
        detailsid:''
		  }
		},
		created() {
            this.getziliao()
		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      this.wailian = location.origin + '/h5/index?shop_id=' + window.btoa(JSON.parse(localStorage.getItem('user')).id)
      this.ceshi = window.screen.width
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;
        // console.log('this.$route.query.name',this.$route.query.name)
      }else{
    
      }
		},
		methods: {
            getziliao(){ 
                this.title = this.$route.query.title
                this.detailsid = this.$route.query.detailsId
                this.code = this.$route.query.code
                this.time = this.$route.query.time
                axios.get('/agent/page/package/details?id='+this.detailsid).then((response)=>{
                  // console.log('response1111',response)
                  if (response.data.msg.code == 0) {
                    this.code = response.data.data.data[0].fetch_code
                    this.time = response.data.data.data[0].updated_at
                    this.package_text = response.data.data.data[0].description
                    console.log('this.package_text',this.package_text)
                    this.shangxiajiastatus = response.data.data.data[0].status
                    this.created_at = response.data.data.data[0].created_at
                    this.min_age = response.data.data.data[0].min_age
                    this.max_age = response.data.data.data[0].max_age
                    this.contract = response.data.data.data[0].contract
                    this.express = response.data.data.data[0].express
                    this.activation_method = response.data.data.data[0].activation_method
                    this.take_number = response.data.data.data[0].take_number
                  }
              })




            }
		}
	}
</script>


<style scoped lang="less">
//   .gongyingshangshangpin{
//     .sxjact{background: rgb(0, 90, 255); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 150px; height: 60px; margin-right: 30px; }
//     .sxj{background: rgb(227, 232, 241); border-radius:30px; font-size: 24px; text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 150px; height: 60px; margin-right: 30px; }

//     .sxjactsj{background: rgb(0, 90, 255); border-radius:0.3rem; text-align: center; font-weight: 500; color: rgb(255, 255, 255); width: 3.3rem; height: 0.7rem;  }
//     .sxjsj{background: rgb(227, 232, 241); border-radius:0.3rem;  text-align: center; font-weight: 500; color: rgb(175, 179, 188); width: 3.3rem; height: 0.7rem; }

//     .xt{ margin-right: 10px; border-radius: 5px; font-size: 12px; padding: 5px 10px;}
//     .lj{width: 90px; height: 32px; color: rgb(64, 66, 71); background: rgb(227, 232, 241); border-radius: 16px; margin-right: 10px; font-size: 14px; cursor: pointer;}
//     .ljact{width: 90px; height: 32px; color: rgb(0, 90, 255); background: rgb(228, 237, 255); border-radius: 16px; margin-right: 10px; font-size: 14px; cursor: pointer;}
//     .bushi3{ margin-right: 20px;}


//     /deep/ .el-switch__core{ width: 85px !important; height: 41px; border-radius: 20px; background: rgb(246, 248, 251); border: 1px solid rgb(227, 232, 241);}
//     /deep/ .el-switch.is-checked .el-switch__core {
//         border-color: #409EFF !important;
//         background-color: #409EFF !important;
//     }
//     /deep/ .el-switch.is-checked .el-switch__core::after{margin-left: -33px; left: 100% !important;}
//     /deep/ .el-switch__core:after{ width: 31px; height: 31px;  top: 4px; left: 4px; background: rgb(227, 232, 241);}
//     .qrcode img{ max-width:100%;}
//   }

</style>
